<template>
  <div class="user-header">
    <el-button type="primary" @click="handleAdd" >新增</el-button>
    <div class="btn">
    <el-form :inline="true" :model="formInline" >
        <el-form-item label="请输入">
            <el-input placeholder="请输入用户名" v-model="formInline.keyword"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="success" @click="handleSearch">搜索</el-button>
        </el-form-item>
    </el-form>
    </div>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="item in tableLabel" :key="item.prop" :width="item.width?item.width:125" :prop="item.prop" :label="item.label"/>
    
    <el-table-column fixed="right" label="Operations" width="120">
      <template #="scope" >
        <div class="ert">
            <el-button  type="primary" size="small"  class="el-btn1" @click="handleEdit(scope.row)" >编辑</el-button>
            <el-button  type="danger" size="small" class="el-btn2" @click="handleDelete(scope.row)" style="margin-left:10px">删除</el-button>
        </div>
      
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="pager"
    background
    layout="prev,pager,next"
    size="small"
    :total="config.total"
    @current-change="handleChange"
  />
  </div>
  
  <el-dialog
    v-model="dialogVisible"
    :title="action == 'add' ? '新增用户' : '编辑用户'"
    width="35%"
    :before-close="handleClose"
  >
       <!--需要注意的是设置了:inline="true"，
		会对el-select的样式造成影响，我们通过给他设置一个class=select-clearn
		在css进行处理-->
    <el-form :inline="true"  :model="formUser" :rules="rules" ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formUser.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item class="select-clearn" label="性别" prop="sex">
            <el-select  v-model="formUser.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              v-model="formUser.birth"
              type="date"
              placeholder="请输入"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          label="地址"
          prop="addr"
        >
          <el-input v-model="formUser.addr" placeholder="请输入地址" />
        </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
 
 <el-card v-if="cardVisible" style="width:50%">
      <span>用户信息</span>
      <div>姓名:<strong>{{cardData.name}}</strong></div>
      <div>年龄:<strong>{{cardData.age}}</strong></div>
      <div>性别:<strong>{{cardData.sex==='1'?"男":"女"}}</strong></div>
      <div>出生日期:<strong>{{cardData.birth}}</strong></div>
      <div>地址:<strong>{{cardData.addr}}</strong></div>
  </el-card>
</template>

<script setup>
import {  ref,getCurrentInstance, onMounted, reactive,nextTick} from "vue";
import { ElMessage,ElMessageBox } from "element-plus";

const cardVisible=ref(false)

const cardData=reactive({})
const handleClick = () => {
  console.log('click')
}

const tabData=ref([])
const tableData = ref([])
const formInline=reactive({
    keyword:""
})
const config=reactive({
    name:"",
    total:0,
    page:1
})
const handleChange=(page)=>{
    config.page=page
    getUserData()
}

const handleSearch=()=>{
    config.name=formInline.keyword
    getUserData()
}

const handleEdit=(val)=>{
        action.value='edit'
        dialogVisible.value=true
       
    nextTick(()=>{
        Object.assign(formUser,{...val,sex:''+val.sex})
    })
    //用定时器SetTimeOut代替nextTick起到同样的效果
}

const handleDelete=(val)=>{
    ElMessageBox.confirm("你确实要删除吗？").then(async ()=>{
     await   proxy.$api.deleteUser({id:val.id})
     ElMessage({
        showClose:true,
        message:"删除成功",
        type:'success'
     })
     cardVisible.value=false
     getUserData()
    })
}
const {proxy}=getCurrentInstance()
const getUserData=async ()=>{
    let data=await proxy.$api.getUserData(config)
    tableData.value=data.list.map(item=>({
        ...item,
        sexLabel:item.sex===1?'男':'女'
    }))
    config.total=data.count
}

const timeFormat=(time)=>{
        var time=new Date(time)
        var year=time.getFullYear()
        var month=time.getMonth()+1
        var date=time.getDate()
        function add(m){
            return m<10?"0"+m :m
        }
        return year + "-" +add(month) + "-" +add(date)
}

const onSubmit=()=>{
    //先要校验
    proxy.$refs['userForm'].validate(async (valid)=>{
        if(valid){
            let res=null
            formUser.birth=/^\d{4}-\d{2}-\d{2}$/.test(formUser.birth)?formUser.birth
            :timeFormat(formUser.birth)
            if(action.value==='add'){
                console.log(formUser);

                res=await proxy.$api.addUser(formUser)
            }else[
                 res=await proxy.$api.editUser(formUser)
            ]
            if(res){
                dialogVisible.value=false
                
                Object.assign(cardData,{...formUser})
               
                cardVisible.value=true
                proxy.$refs['userForm'].resetFields()
                getUserData()
            }else{
                ElMessage({
                    showClose:true,
                    message:'请输入正确的内容',
                    type:'error'
                })
            }
        }
    })
}
onMounted(()=>{
  getUserData()
})

const tableLabel=reactive([
    {
        prop:'name',
        label:'姓名'
    },
    {
        prop:'age',
        label:'年龄'
    },
    {
        prop:'sexLabel',
        label:'性别'
    },
    {
        prop:'birth',
        label:'出生日期'
    },
    {
        prop:'addr',
        label:'地址',
        width:400
    },
])

const action=ref('add')
//新增和编辑共用一个窗口，所以通过设置action区分
const formUser=reactive({})
const dialogVisible=ref(false)
//表单校验规则
const rules = reactive({
  name: [{ required: true, message: "姓名是必填项", trigger: "blur" }],
  age: [
    { required: true, message: "年龄是必填项", trigger: "blur" },
    { type: "number", message: "年龄必须是数字" },
  ],
  sex: [{ required: true, message: "性别是必选项", trigger: "change" }],
  birth: [{ required: true, message: "出生日期是必选项" }],
  addr:[{ required: true, message: '地址是必填项' }]
})

const handleClose=()=>{
    //获取表单信息
    dialogVisible.value=false
    proxy.$refs['userForm'].resetFields()
}

const handleCancel=()=>{
    dialogVisible.value=false
    proxy.$refs['userForm'].resetFields()
}

const handleAdd=()=>{
    dialogVisible.value=true
    action.value='add'
}
</script>

<style scoped lang="less">
    .user-header{
        display: flex;
       
       .btn{
        margin-left: 840px;
       }
    }

    .table{
       position: relative;
        .el-btn2{
            display: flex;
           
            margin-left:50px;
            margin-bottom: 20px;
        }
        .pager{
            position: absolute;
            right: 10px;
            bottom: 30px;
        }
        .el-table{
            width: 100%;
            height: 500px;
        }
    }

   .select-clearn{
    display: flex;
   }
   .ert{
    display: flex;
    
   
    
   }
</style>